<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Reader</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/conmon3/Reader.css" />
	</head>

	<body>
		<div class="web">
			<header>
				<div class="top clearfix">
					<div class="top_l fl">
						<a href="../index.html"><img src="../img/img3/14-2.png" /></a>
					</div>
					<div class="top_r fr">
						<a href=""><img src="../img/img3/12-1.png" /></a>
					</div>
					<div class="top_c">
						<a href=""><img src="../img/img3/logo.png" /></a>
					</div>
				</div>
			</header>
			<section>
				<div class="tup">
					<img src="../img/img3/15-4.png" />
				</div>
				<div class="head2">
					<a href=""><img src="../img/img3/head3.png" /></a>
				</div>
				<div class="jiah">
					<a href=""><img src="../img/img3/33.png" /></a>
				</div>
				<div class="wenz">
					一个名字
					<ul>
						<li>
							<div class="qiu1 fl"></div>自然</li>
						<li>
							<div class="qiu2 fl"></div>旅行</li>
						<li>
							<div class="qiu3 fl"></div>世界</li>
					</ul>
				</div>
				<div class="name">
					<ul>
						<li>
							<a href="">234
								<p>电邮</p>
							</a>
						</li>
						<li>
							<a href="">22.2K
								<p>跟随者</p>
							</a>
						</li>
						<li>
							<a href="">1353
								<p>关注</p>
							</a>
						</li>
					</ul>
				</div>
				<table cellpadding="0">
					<tr>
						<td class="action">电邮</td>
						<td><a href="Bookmarks.html" style="color: black;">书签</a></td>
					</tr>
					<tr>
						<td id="a" >
							<div id="yello"  >
								X
							</div>
							<p>最好的地方和滑雪 何处去单板滑雪和 和滑雪</p>
							<div class="fl"><img src="../img/img3/229.png" /></div><span>世界冲浪</span></td>
						<td id="b">
							<div id="yello2" >
								X
							</div>
							<p>全面外交全面外交在板克里在板克里罗马全面外交</p>
							<div class="fl"><img src="../img/img3/22-10.png" /></div><span>纽约时报</span></td>
					</tr>
					<tr>
						<td id="c">
							<div id="yello3">
								X
							</div>
							<p>12小时在柏林:<br />城市你这样的人</p>
							<div class="fl"><img src="../img/img3/22-11.png" /></div><span>纽约时报</span></td>
						<td id="d">
							<div id="yello4">
								X
							</div>
							<p>12小时在柏林:<br />城市你这样的人</p>
							<div class="fl"><img src="../img/img3/22-11.png" /></div><span>纽约时报</span></td>
					</tr>

				</table>


			</section>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<!--适配手机大小js-->
		<script>
			document.body.style.height = window.innerHeight + "px";
			/*动态改变根元素字体大小*/
			function recalc() {
				var clientWidth = document.documentElement.clientWidth;
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
				// 字体大小  =1个rem单位表示多少个像素*(设备宽度    /  设计图宽度)
			}
			function td() {
				document.getElementById("yello").style.display = "block";
			}

			function td1() {
				console.log(document.getElementById("yello").style)		
				document.getElementById("yello").style.display = "none";
				$("#yello").hide();
			}

			function initRecalc() {
				recalc();
				var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
				if(!document.addEventListener) return;
				window.addEventListener(resizeEvt, recalc, false);
				document.addEventListener('DOMContentLoaded', recalc, false);
			}
			initRecalc();
			
				$('section').scroll(function(){
					if($('section').scrollTop() >50 ){
						$('header').addClass('header-change');
					}else {
						$('header').removeClass('header-change');
					}
				});
				
				document.getElementById("yello").addEventListener("click",function(e){
					document.getElementById("yello").style.display = "none";
				})
				
				
				document.getElementById("a").addEventListener("click",function(e){
					document.getElementById("yello").style.display = "block";
				},true)
				
				
				document.getElementById("yello2").addEventListener("click",function(e){
					document.getElementById("yello2").style.display = "none";
				})
				
				
				document.getElementById("b").addEventListener("click",function(e){
					document.getElementById("yello2").style.display = "block";
				},true)
				
				document.getElementById("yello3").addEventListener("click",function(e){
					document.getElementById("yello3").style.display = "none";
				})
				
				
				document.getElementById("c").addEventListener("click",function(e){
					document.getElementById("yello3").style.display = "block";
				},true)
				
				document.getElementById("yello4").addEventListener("click",function(e){
					document.getElementById("yello4").style.display = "none";
				})
				
				
				document.getElementById("d").addEventListener("click",function(e){
					document.getElementById("yello4").style.display = "block";
				},true)
		</script>
	</body>

</html>